<template>
  <Schema
    :options="options"
    :span="8"
    :model="model"
    :rules="rules"
    label-width="120px"
  ></Schema>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import Schema from "./components/Schema.vue";
const options = [
  {
    component: "input",
    label: "用户名",
    key: "username",
    model: "username",
  },
  {
    component: "input",
    label: "密码",
    key: "password",
    props: {
      type: "password",
    },
    model: "password",
  },
  {
    component: "select",
    label: "城市",
    options: [
      {
        value: "bj",
        label: "北京",
      },
      {
        value: "wh",
        label: "武汉",
      },
      {
        value: "sz",
        label: "深圳",
      },
    ],
    key: "city",
    model: "city",
  },
  {
    component: "button",
    btnText: "提交",
    submitHandler: () => {
      console.log("表单校验成功");
    },
  },
];
const model = reactive({
  username: "",
  password: "",
  city: "",
});
const rules = {
  username: [{ required: true, message: "请填写用户名", trigger: "blur" }],
  password: [{ required: true, message: "请填写密码", trigger: "blur" }],
  city: [{ required: true, message: "请填选择城市", trigger: "change" }],
};
</script>

<style lang="less" scoped></style>
